<template>
  <div class="map-container">
    <a-map :zoom="zoom" :center="center">
      <a-marker-clusterer :grid-size="gridSize" :max-zoom="maxZoom">
        <a-marker v-for="(item, index) in markers" :key="index" :position="item.position" :icon="item.icon" @click="showInfoWindow(item)">
          <a-info-window :position="item.position" :is-open="item.isOpen" @close="closeInfoWindow(item)">
            <div class="info-window">
              <h3>{{ item.name }}</h3>
              <p>{{ item.address }}</p>
              <p>老人总数：{{ item.total }}</p>
              <p>服务人员：{{ item.staff }}</p>
              <p>剩余床位：{{ item.beds }}</p>
            </div>
          </a-info-window>
        </a-marker>
      </a-marker-clusterer>
    </a-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 12, // 地图缩放级别
      center: [113.665412, 34.757975], // 地图中心点坐标
      gridSize: 80, // 聚合标记的网格大小
      maxZoom: 18, // 最大缩放级别
      markers: [
        {
          name: '某养老院',
          address: '上党区某某街道某某路123号',
          position: [113.665412, 34.757975],
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          isOpen: false,
          total: 100,
          staff: 50,
          beds: 20,
        },
        {
          name: '某日间照料中心',
          address: '管城回族区经开区经北二路116号办公楼5楼',
          position: [113.685412, 34.767975],
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          isOpen: false,
          total: 50,
          staff: 20,
          beds: 10,
        },
        {
          name: '某社区服务中心',
          address: '金水区某某街道某某路456号',
          position: [113.675412, 34.747975],
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          isOpen: false,
          total: 200,
          staff: 100,
          beds: 50,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      this.$refs.amap.getMap().then((map) => {
        map.setFitView();
      });
    },
    showInfoWindow(item) {
      this.markers.forEach((marker) => {
        marker.isOpen = false;
      });
      item.isOpen = true;
    },
    closeInfoWindow(item) {
      item.isOpen = false;
    },
  },
};
</script>

<style>
.map-container {
  height: 600px;
}
.info-window {
  width: 200px;
  padding: 10px;
}
.info-window h3 {
  margin: 0;
  font-size: 16px;
}
.info-window p {
  margin: 5px 0;
  font-size: 14px;
}
</style>
